/**
* 描述：搜索职位详情
*/
<style lang="scss" scoped>
  @import 'src/styles/mixins';
  @import 'src/styles/icons';
  @import 'src/styles/common';
  @import '/style/index.scss';
</style>
<template>
  <div class="k-main-content">
    <div class="title-content buleShadow">
      <div class="title-content-main">
        <el-row style="padding-top: 30px;">
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <div class="title-img"><img :src="`/api/pub/image/${detailJobData.companyLogo}`" /></div>
              <div class="title-describe">
                <div><span class="title-describe-title">{{detailJobData.companyName}}</span></div>
                <div>
                  <span class="title-jobName">{{detailJobData.title}}</span>
                  <i class="titleTime">{{detailJobData.refreshedAt | releaseDate}}</i>
                  <i class="titleTime">发布于黄石招才网</i>
                </div>
                <div class="clear"></div>
                <div class="info">城市：<i>{{detailJobData.cityId | cityAndType}}</i> &emsp;经验：<i>{{detailJobData.experience | experience }}</i> &emsp;学历：<i>{{detailJobData.education | education }}</i></div>
                <div class="biaoqian">
                      <i class="cur">{{detailJobData.salary | salaryState}}</i>
                      <i>{{detailJobData.position | positionFilter}}</i>
                      <div class="clear"></div>
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </el-col>
          <el-col :span="6">
            <a class="title-content-btns radius05" @click="submitAppl">投份简历</a>
            <div class="clear"></div>
            <!--<div class="wanshan"><i class="icon icon-jianli-min"></i>完善在线简历</div>-->
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="body-content">
      <div class="body-content-tab fl-left">
        <div class="introduction">
          <div class="title"><span class="mg-left10">职位描述</span></div>
          <div class="introduction-content">
            <p>职位描述：</p>
            <p v-for="item in detailJobData.descriptionList">{{item}}</p>
            <p>职位诱惑：</p>
            <p v-for="item in detailJobData.temptationList">{{item}}</p>
          </div>
        </div>
        <div class="introduction">
          <div class="title"><span class="mg-left10">工作地址</span></div>
          <div class="introduction-content fl-left">{{detailJobData.cityId | cityAndType}} - {{detailJobData.address}}</div>
          <!--<a class="introduction-contenmain-labelt fl-right">收起地图</a>-->
          <div class="clear"></div>
          <div class="map" id="jobContainer"></div>
        </div>
        <div class="introduction">
          <div class="title"><span class="mg-left10">职位发布者</span></div>
          <div class="hr" style="padding:5px 0 10px;"></div>
          <div class="createUser">
            <img :src="detailJobData.creatorAvatar?`/api/pub/image/${detailJobData.creatorAvatar}`:`/static/images/web/index/man01.jpg`" class="leftImg">
            <div class="info">
              <div class="userName">{{detailJobData.creatorName || 'xxx'}}</div>
              <div class="userJob">{{detailJobData.creatorJob || 'xxx'}}</div>
            </div>
            <div class="clear"></div>
          </div>
          <div class="create-info">
            <div class="statusName">简历处理</div>
            <div class="status">正常</div>
            <div class="point">处理率：<i>{{detailCompanyData.applicantResponseRate}}%</i> &emsp;用时：<i>{{detailCompanyData.applicantProcessTime | applicantProcessTime}}</i> 天</div>
          </div>
          <div class="clear"></div>
        </div>
        <!--<div class="introduction">-->
          <!--<div class="title"><span class="mg-left10">更多相关职位</span></div>-->
          <!--<div class="hr" style="padding:5px 0;"></div>-->
          <!--<div class="tuijian-jobs">-->
            <!--<div class="job">-->
              <!--<img src="/static/images/web/index/companyLogo.jpg" width="60" height="60">-->
              <!--<div class="jobMoney">8k-12k</div>-->
              <!--<div class="jobName">UI设计师</div>-->
              <!--<div class="comName overflowHidden">中国平安综合金融集团</div>-->
            <!--</div>-->
            <!--<div class="job">-->
              <!--<img src="/static/images/web/index/companyLogo.jpg" width="60" height="60">-->
              <!--<div class="jobMoney">8k-12k</div>-->
              <!--<div class="jobName">UI设计师</div>-->
              <!--<div class="comName overflowHidden">中国平安综合金融集团</div>-->
            <!--</div>-->
            <!--<div class="job">-->
              <!--<img src="/static/images/web/index/companyLogo.jpg" width="60" height="60">-->
              <!--<div class="jobMoney">8k-12k</div>-->
              <!--<div class="jobName">UI设计师</div>-->
              <!--<div class="comName overflowHidden">中国平安综合金融集团</div>-->
            <!--</div>-->
            <!--<div class="job">-->
              <!--<img src="/static/images/web/index/companyLogo.jpg" width="60" height="60">-->
              <!--<div class="jobMoney">8k-12k</div>-->
              <!--<div class="jobName">UI设计师</div>-->
              <!--<div class="comName overflowHidden">中国平安综合金融集团</div>-->
            <!--</div>-->
            <!--<div class="job">-->
              <!--<img src="/static/images/web/index/companyLogo.jpg" width="60" height="60">-->
              <!--<div class="jobMoney">8k-12k</div>-->
              <!--<div class="jobName">UI设计师</div>-->
              <!--<div class="comName overflowHidden">中国平安综合金融集团</div>-->
            <!--</div>-->
            <!--<div class="job">-->
              <!--<img src="/static/images/web/index/companyLogo.jpg" width="60" height="60">-->
              <!--<div class="jobMoney">8k-12k</div>-->
              <!--<div class="jobName">UI设计师</div>-->
              <!--<div class="comName overflowHidden">中国平安综合金融集团</div>-->
            <!--</div>-->
            <!--<div class="clear"></div>-->
          <!--</div>-->
          <!--<div class="clear"></div>-->
        <!--</div>-->
      </div>
      <div class="right-content">
        <div class="conpanyInfo buleShadow radius05">
          <img :src="detailJobData.companyLogo?`/api/pub/image/${detailJobData.companyLogo}`:`/static/images/web/index/companyLogo.jpg`" class="toux">
          <div class="comName" @click="goToCompanyDetail(detailCompanyData.id)" style="cursor: pointer;">{{detailCompanyData.fullName}}</div>
          <div class="clear"></div>
          <div class="info"><i class="icon icon-info01-min"></i>{{detailCompanyData.industry | industryFilter}}<div class="clear"></div></div>
          <div class="info"><i class="icon icon-info02-min"></i>{{detailCompanyData.devStage | capitalStageFilter}}<div class="clear"></div></div>
          <div class="info"><i class="icon icon-info03-min"></i>{{detailCompanyData.size | companyScaleFilter}}<div class="clear"></div></div>
          <div class="info"><i class="icon icon-info04-min"></i>https://www.pinan.com...<div class="clear"></div></div>
        </div>
        <!--<div class="conpanyOtherJobs buleShadow radius05">-->
          <!--<div class="inner">-->
              <!--<div class="title">相似职位</div>-->
              <!--<a class="more">更多>></a>-->
              <!--<div class="clear"></div>-->
              <!--<div class="hr"></div>-->
              <!--<div class="job">-->
                <!--<div class="jobName">UI设计师</div>-->
                <!--<div class="jobMoney">8k-12k</div>-->
                <!--<div class="comName overflowHidden">中国平安综合金融集团</div>-->
              <!--</div>-->
              <!--<div class="job">-->
                <!--<div class="jobName">UI设计师</div>-->
                <!--<div class="jobMoney">8k-12k</div>-->
                <!--<div class="comName overflowHidden">中国平安综合金融集团</div>-->
              <!--</div>-->
              <!--<div class="job">-->
                <!--<div class="jobName">UI设计师</div>-->
                <!--<div class="jobMoney">8k-12k</div>-->
                <!--<div class="comName overflowHidden">中国平安综合金融集团</div>-->
              <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      </div>
      <div class="clear"></div>
    </div>
    <login-modal :title="`登录`" v-model="loginModalShow"></login-modal>
  </div>
</template>
<script>
   import map from '@/js/mixins/map';
   import AMap from 'AMap';
   import { detailJob, detailCompany, submitAppl } from '@/service/web/detailService/detailMService';
   import loginModal from '@/components/common/modal/loginModal';
   export default {
    mixins: [map],
    data () {
      return {
        detailJobData: {},
        detailCompanyData: {},
        loginModalShow: false
      };
    },
     components: {
       loginModal
     },
    async mounted () {
      await this._initMap('jobContainer', 10);
      const res = this.$route.query;
      this.detailJob(res.id);
    },
    methods: {
      // 获取职务详情
      async detailJob (id) {
        let result = await detailJob({id: id});
        this.detailJobData = result.data;
        this.detailJobData.descriptionList = [];
        if (this.detailJobData.description) { // 格式化职位描述
          this.detailJobData.description = this.detailJobData.description.replace(/\n/g, ';');
          this.detailJobData.descriptionList = this.detailJobData.description.split(';');
        }
        this.detailJobData.temptationList = [];
        if (this.detailJobData.temptation) { // 格式化职位描述
          this.detailJobData.temptation = this.detailJobData.temptation.replace(/\n/g, ';');
          this.detailJobData.temptationList = this.detailJobData.temptation.split(';');
        }
        let result1 = await detailCompany({id: this.detailJobData.companyId});
        this.detailCompanyData = result1.data;
        if (this.detailCompanyData.latitude && this.detailCompanyData.longitude) this.addMarker([this.detailCompanyData.longitude, this.detailCompanyData.latitude]);
      },
      async submitAppl () {
        let webToken = this._hyTool.getStore('webLoginInfo');
        if (!webToken) {
          this.$message({message: '请先登录！', type: 'warning'});
          this.loginModalShow = true;
          return;
        }
        this.$confirm('是否投送简历？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let result = await submitAppl({jobId: this.detailJobData.id});
          console.log(result);
          this.$message({message: '投送成功！', type: 'success'});
        }).catch(() => {});
      },
      // 跳转到企业详情
      goToCompanyDetail (id) {
        this.$router.push({path: '/companyDetail', query: {id: id}});
      },
      // 地图添加maker
      async addMarker (position) {
        this.map.panTo(position);
        this.map.setZoom(17);
        let marker = null;
        marker = new AMap.Marker({
          map: this.map,
          position: position,
          autoRotation: true
        });
        return marker;
      }
    }
  };
</script>
